import React from "react";
import { Popover, Button, Tooltip } from "@ct0/ui";
import PanelTemplate from "./panelTemplate";

export default function TooltipPanel() {
  const data = {
    title: "Tooltip组件",
    descriptions: [
      "Tooltip, 黑色，目前较多用来承载简单的描述信息",
      "Popover, 白色，目前较多用来承载有交互的内容，比如链接、按钮",
    ],
    content: {
      title: "代码演示",
      children: [
        {
          title: "Tooltip",
          descriptions: "",
          component: (
            <Tooltip
              placement="bottom"
              trigger={["hover"]}
              overlay={<div>Tooltip content</div>}
            >
              <span>
                <Button type="blue">Tooltip trigger</Button>
              </span>
            </Tooltip>
          ),
          codeSnippet: `import { Tooltip } from '@ct0/ui'

ReactDOM.render(
    <Tooltip
        placement="bottom"
        overlay={
            <div>
               Tooltip content
            </div>
        }
    >
        <span>Tooltip trigger</span>
    </Tooltip>,
    mountNode
)
`,
        },
        {
          title: "Popover",
          descriptions: "",
          component: (
            <Popover
              trigger={["click"]}
              placement="right"
              overlay={
                <div>
                  <div>Popover content</div>
                  <Button type="blue">按钮</Button>
                </div>
              }
            >
              <span>
                <Button type="blue">Popover trigger</Button>
              </span>
            </Popover>
          ),
          codeSnippet: `import { Popover } from '@ct0/ui'

ReactDOM.render(
    <Popover
        trigger={["click"]}
        placement="right"
        overlay={
           <div>
                <div>Popover content</div>
                <Button type="blue">>按钮</Button>
            </div>
        }
    >
        <span>Popover trigger</span>
    </Popover>,
    mountNode
)
`,
        },
      ],
    },
    componentApi: [
      {
        param: "overlay",
        description: "内容",
        type: "(() => ReactNode) | ReactNode",
        default: "",
        required: true,
      },
      {
        param: "zIndex",
        description: "层级",
        type: "number",
        default: "",
        required: false,
      },
      {
        param: "placement",
        description: "位置",
        type: "'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'",
        default: "",
        required: false,
      },
      {
        param: "getTooltipContainer",
        description: "浮层渲染父节点",
        type: "function",
        default: "默认渲染到触发节点的父节点",
        required: false,
      },
      {
        param: "trigger",
        description: "触发方式",
        type: "string | string[], 'hover' | 'click' | 'focus'",
        default: "['hover']",
        required: false,
      },
      {
        param: "defaultVisible",
        description: "默认的显示状态",
        type: "boolean",
        default: "",
        required: false,
      },
      {
        param: "visible",
        description: "是否显示",
        type: "boolean",
        default: "",
        required: false,
      },
      {
        param: "onVisibleChange",
        description: "显示隐藏的回调",
        type: "(visible) => void",
        default: "",
        required: false,
      },
      {
        param: "mouseEnterDelay",
        description: "鼠标移入后延时多少才显示 Tooltip，单位：秒",
        type: "number",
        default: "0",
        required: false,
      },
      {
        param: "mouseLeaveDelay",
        description: "鼠标移出后延时多少才隐藏 Tooltip，单位：秒",
        type: "number",
        default: "0.1",
        required: false,
      },
      {
        param: "overlayClassName",
        description: "类名",
        type: "string",
        default: "",
        required: false,
      },
      {
        param: "overlayInnerStyle",
        description: "样式",
        type: "CSSProperties",
        default: "",
        required: false,
      },
      {
        param: "align",
        description: "将会合并到placement的配置中",
        type: "https://github.com/yiminghe/dom-align",
        default: "",
        required: false,
      },
    ],
  };
  return <PanelTemplate {...data} />;
}
